原本想說先從 HTML 複習一下，應該不會花太多時間。
結果打開以前的程式碼一看：

<div>
  <div>
    <div>
      <div>
        內容
      </div>
    </div>
  </div>
</div>

哇哩～看著看著突然有點餓 ==

這哪是 HTML，根本是 div 漢堡吧 XD （好吃!愛吃!）

一層 Header、一層 Main、一層 Section、一層 Article，最後再蓋上一層 Footer。
嗯。。。很有層次，嘻嘻。

所以今天就來拆一下這個 「HTML 美味蟹堡」，
順便重新看看 HTML 的結構，
到底可以怎麼寫得更清楚一點。

先說，
div 沒有做錯事
其實 div 本身完全沒有問題。
（超好笑，聽君一席話，如聽一席話。）

它就是一個很常拿來包內容的容器，
平常在排版的時候也一定會一直用到。
真正的問題不是 div，是太順手了!

看到一個區塊：

<div></div>

再看到一個區塊：

<div></div>

裡面還想再分一層：

<div>
  <div></div>
</div>

寫著寫著就會變成：

<div>
  <div>
    <div>
      <div>
        <div>
          我到底在哪一層？
        </div>
      </div>
    </div>
  </div>
</div>

當下其實完全不會覺得有什麼問題。
反正畫面有出來、CSS 也套得到。
能跑就好。

結果過一陣子再打開：
「這層是幹嘛的？」
「這層又為什麼要包？」
「到底誰寫的啦？」
。。。。。。。
哎呦喂~是我!

於是今天的第一個任務，
就是先把這顆越疊越厚的 div 美味蟹堡拆開看看。
不然漢堡料放太多，最後連自己都不知道自己吃了什麼 XD

那就來拆這顆 HTML 美味蟹堡
既然都說它是美味蟹堡了，那就來看看每一層到底是什麼!

<header>
  上層麵包
</header>

<main>
  <section>
    生菜

    <article>
      蟹堡肉
    </article>
  </section>
</main>

<footer>
  下層麵包
</footer>

好啦! 真的寫 HTML 當然不會在裡面放「生菜」跟「蟹堡肉」
但這樣想其實意外地滿好記。

一個網頁就跟漢堡一樣，
不是料疊得越多越厲害，
而是每一層都要知道自己是來幹嘛的。

• Header：上層麵包
  header 通常會放在頁面或某個區塊的開頭。

像是：
Logo
網站名稱
標題
導覽列

例如：

<header>
  <h1>我的網站</h1>

  <nav>
    <a href="#">首頁</a>
    <a href="#">文章</a>
    <a href="#">關於我</a>
  </nav>
</header>

這樣光看程式碼就知道：

「喔～這裡是網站上面那一塊。」

不用再看到：

<div class="header">

才知道它原來是 Header XD

• Nav：醬料區（？）
  nav 就是放導覽連結的地方。

例如：

<nav>
  <a href="#">首頁</a>
  <a href="#">作品</a>
  <a href="#">聯絡我</a>
</nav>

負責把你帶去不同地方。
有點像醬料一樣？
沒有它好像也吃得下去，
但有了之後整體比較完整 XD

• Main：主餐終於來了
  main 就是這個頁面的主要內容。

例如：

<main>
  <h2>最新文章</h2>
  <p>這裡放主要內容。</p>
</main>

一個頁面裡真正最重要的東西，基本上都會放在這裡。

所以它可以理解成：
漢堡本人!

前面講半天，終於不是麵包了~

• Section：幫配料分區
  section 可以拿來把不同主題的內容分開。

例如：

<section>
  <h2>最新文章</h2>
</section>

<section>
  <h2>熱門文章</h2>
</section>

一個是「最新文章區」。

一個是「熱門文章區」。

這樣至少不用全部擠在一起，看起來像把生菜、起司、番茄全部攪成一坨。

• Article：主角蟹堡肉
  article 則比較適合拿來放一個可以自己獨立存在的內容。

像是：
一篇文章
一則新聞
一篇貼文
一則留言

例如：

<article>
  <h3>Day 2｜肚子餓了嗎？今天來做 HTML 美味蟹堡</h3>
  <p>今天重新整理 HTML 的結構。</p>
</article>

所以也可以把它放進 section 裡：

<section>
  <h2>最新文章</h2>

  <article>
    <h3>文章 A</h3>
  </article>

  <article>
    <h3>文章 B</h3>
  </article>
</section>

簡單來說：
section 比較像是幫內容分類。
article 則是裡面那一份可以單獨拿出來看的東西。

嗯……
所以 Article 就決定是蟹堡肉了。
沒有肉還叫什麼美味蟹堡！！

• Footer：最後把漢堡蓋起來
  最後是 footer。
  通常會放一些頁面底部的資訊。

像：

<footer>
  <p>聯絡方式</p>
</footer>

例如版權、聯絡資訊或其他補充內容。

上下兩層麵包終於合體！
美味蟹堡完成！

div 前面吐槽它這麼久，
還是要幫它說句話。

div 本來就不是壞東西。
如果只是單純想包一層來排版：

<div class="card-wrapper">
  ...
</div>

這完全沒問題。

真正想避免的是：
明明這個區塊有自己的意思，卻全部一律用 div。

像：

<div class="header">
<div class="nav">
<div class="main">
<div class="article">
<div class="footer">

不是不能跑。

只是都已經幫它取名叫 header 了……

那直接：

<header>

不是更乾脆嗎 XD

今天這顆漢堡吃完後，
以前比較容易在意「畫面有沒有出來？」

現在會多想一下：
「這個東西到底是什麼？」
如果它本身有一個很明確的用途，就選一個適合它的 HTML 標籤。

真的只是為了包版面，再請 div 出場。

所以今天學到的不是：
div 很好，但不要吃到飽。

不然最後網頁沒怎樣，
自己先被這顆美味蟹堡噎死 XD

好啦，今天先吃到這裡!
Day 2，美味蟹堡配方分享!